<template>
  <div>
    <div>{{store.state.count}}</div>
    <div>{{store.getters.totalPrice}}</div>
    <div>personSum-- {{store.state.staff.personSum}}</div>
    <div>doubleCount-- {{store.getters['staff/doubleCount']}}</div>
    <div>deviceSum-- {{store.state.device.deviceSum}}</div>
    <div>doubleCount-- {{store.getters['device/doubleCount']}}</div>
    <!-- <el-input-number :value="store.state.count" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> -->
    <input type="text" :value="store.state.count" @change="handleChange">
    <el-button @click="btnclick('plus')">addCount</el-button>
    <el-button @click="btnclick('reduce')">reduceCount</el-button>
    <el-button @click="btnclick('personSum')">增加staff下的personSum
    </el-button>
    <el-button :disabled="btnDisabled"
               @click="btnclick('asyncPlus')">asyncPlus</el-button>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
var btnDisabled = ref(false)
let btnclick = async (from) => {
  switch (from) {
    case 'plus':
    case 'reduce':
      store.commit(from)
      break;
    case 'personSum':
      store.commit('staff/increment')
      break;
    case 'asyncPlus':
      btnDisabled.value = true;
      await store.dispatch('asyncPlus', 5)
       btnDisabled.value = false;
      break;
    default:
  }
}
let handleChange = (event) => {
  store.commit('countChange', event.target.value)
}
</script>

<style lang="scss" scoped>
</style>